{% extends "../layout/default.tpl" %}
{% import "../common/header.tpl" as headers %}
{% block body %}
{{ headers.header() }}
<style>
  .msg-login {
    overflow: hidden;
  }

  .msg-login img {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .border-t {
    position: relative;
  }

  .border-t>span {
    top: -10px;

    display: block;
    position: absolute;
    left: 60px;
    background: #fffbf0;
    /* width: 20px;
    height: 10px; */
    padding: 0 10px;
    color: #e74851;

  }

  #login {
    position: absolute;
    top: 0;
    left: 0;
    background: white;
  }
</style>
<div class="for-bg">
  <div class="container clearfix">
    <div class="index-left">

      <div class="title clearfix">
        <span class="float-left">您现在的位置是：
          <a href="/">首页 ></a>
          <a href="/message/index">博客留言 ></a>
        </span>
      </div>

      <div class="msg-login">登录</div>
      <div class="msg-input">
        <div class="border-t"><span></span></div>

        <div class="border-l"></div>
        <div class="border-r"></div>
        <div class="msg-area">
          <textarea name='textarea' resize='false' placeholder="既然来了，就聊两句在走吧，，"></textarea>
        </div>
      </div>
      <button class="chat-btn"></button>
      <span class="float-right show-msg" style="line-height: 30px;margin-top: 20px;">评论内容为空！</span>
    </div>
    <div class="index-right">
      {% include "../common/rightNav.tpl" %}
      {% include "../common/article.tpl" %}
      {% include "../common/link.tpl" %}
    </div>
  </div>
</div>
{% include "../common/footer.tpl" %}
{% include "../common/arrow.tpl" %}

<div class="mask-login">
  <div class="boke-login">
    <i class="iconfont icon-close float-right"></i>

    <img src="/public/img/login_logo.jpg" style="margin:20px;">
    <div class="login-title">
      <span>正在使用倡言评论</span>
    </div>
    <p class="mt-1" style="margin-top:20px;">微信登陆</p>
    <div>
      <img src="/public/img/showqrcode.png" alt="" style="width:164px">
    </div>
    <p class="mt-1" style="margin-top:10px;font-size:13px;">首次登录需关注畅言公众号</p>
    <p class="login-logos mt-1">
      <a href="javascript:" title="微博"><i class="iconfont icon-weibo-circle-fill" style="color:#E6484F;"></i></a>
      <a href="javascript:" title="微信"><i class="iconfont icon-weixin1" style="color: #66D354;"></i></a>
      <!-- <i class="iconfont icon-QQ-circle-fill" style="color:#38A3FD;"></i> -->
      <a href="javascript:gl()" title="github"><i class="iconfont icon-github-fill" style="color:#38A3FD;"></i></a>

    </p>
    <p class="mt-1" style="font-size:14px;">登录过的用户请沿用之前的登录方式</p>
    <!-- <button onclick="handleSocket()">clickMe</button> -->
  </div>
</div>
<!-- <iframe id="login" width="30px" height="30px" pos></iframe> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.dev.js"></script>
<script>
  var socket = io('http://127.0.0.1:5000', {
    query: {
      room: "demo",
      userId: `client_${Math.random()}`
    },
    transports: ['websocket']
  }) //已经连接上

  socket.on('connect', () => {

    const id = socket.id
    
    socket.on(id, msg => {
      console.log('#receive', msg)
    })

  })

  socket.on('online', msg => {
    console.log('#online', msg)
  })

  socket.on('disconnect', (msg) => {
    console.log('#disconnect', msg)
  })

  socket.on('disconnecting', () => {
    console.log('#disconnecting')
  })

  socket.on('error', () => {
    console.log('#error')
  })

  let dom = document.getElementsByClassName('chat-btn')[0]

  dom.onclick = function () {
    var value = document.querySelector("[name=textarea]").value

    socket.emit('server', {
      target: "Dkn3UXSu8_jHvKBmAAHW",
      payload: {
        msg: 'test',
      },
    })
  }

  var win = null

  function gl() {

    var width = 600
    var height = 500
    //console.log(window.screen.height,window.screen.width)
    var top = (window.screen.height - 30 - height) / 2
    var left = (window.screen.width - 10 - width) / 2

    win = window.open('/github/login', '_demo', `height=${height},width=${width},top=${top},left=${left},resizable=no`)

    //socket.emit("loginGithub")

    var loop = setInterval(function(){
      if(win.closed){
        clearInterval(loop)
        window.location.reload()
      }
    },1000)


    //win.opener.connectSocket()

    /*var timer = setInterval(() => {
      if (win.parent == null) {
        clearInterval(timer)
      }
      $.ajax({
        url: "/github/islogin",
        type: "get",
        success(res) {
          if (res !== undefined) {
            win.close()
            window.location.reload()
          }
        }
      })
    }, 1000)*/

    //var login = document.getElementById('login')
    //console.log(login)
    //login.src = "/github/login"
    //console.log(win)
    //窗口间同源策略
    // setInterval(function(){
    //   console.log(win.location.href)
    // },1000)
    //win.opener.postMessage('123', "*")
    //获取登录成功后的url，将其替换当前页面的链接，同时刷新页面
    // win.addEventListener('message', function (e) {
    //   console.log(e)
    // })

  }


  //islogin()

  //socket.emit("islogin")

  //socket.on('res', (data) => {
    //console.log(data)
  //})
  islogin()

  function islogin() {

    $.ajax({
      url: "/github/islogin",
      type: "GET",
      success: function (res) {
        var timer = null
        res = res.data
        if (res && res.indexOf('error') == -1) {

          var html = `<img src=${res.split(" ")[1]} alt="">`
          $('.msg-login').html(html)
          $('.msg-login').unbind('click').click(function () {
            if (window.confirm('确认退出吗？')) {
              $.ajax({
                url: "/github/destory",
                type: "GET",
                success: function (res) {
                  if (res.code == 200) {
                    window.location.reload()
                  }
                }
              })
            }
          })
          $(".border-t>span").html(res.split(" ")[0] + "：")
        }
      }
    })
  }





  (function () {
    $('.msg-login').click(function () {
      $('.mask-login').show()
    })
    $('.boke-login .icon-close,.mask-login').click(function (e) {
      $('.mask-login').hide()
    })
    $('.boke-login').click(function (e) {
      e.stopPropagation()
    })

    //获取用户信息[querystring]
    var query = location.search && location.search.split("?")[1].split('&')
    var obj = {}
    for (var item of query) {
      var arr = item.split('=')
      obj[arr[0]] = arr[1]
    }

    var timer = null

    if (!$.isEmptyObject(obj)) {
      // timer = setInterval(function () {

      // }, 3000)

      $.ajax({
        url: "/oauth/github/callback",
        type: "GET",
        // dataType: "json",//要求后端必须传JSON，这是一个约定（约束）
        data: obj,
        success: function (res) {
          //res = JSON.parse(res)
          //console.log(res.split(' ')[0])
          if (res.indexOf('login') > -1) {
            console.log(JSON.parse(res.split(' ')[0]))
          } else {
            console.log(JSON.parse(res))
          }
        }
      })

      //console.log(123)
    }

    //当前页面与github页面进行通信不允许使用iframe嵌套其他的页面

  })()
</script>
{% endblock %}